<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.8.3.js"></script>
		<style>
			*{
				padding: 0px;
				margin: 0px;
				border:0px ;
			}
			.wrapper{
				width: 440px;
				height: auto;
				position: absolute;
				top: 50px;
				left: 300px;
			}
			.left{
				width: 70px;
				height: auto;
				float: left;
			}
			.center{
				width: 280px;
				height: 400px;
				float: left;
				
			}
			
			.right{
				width: 70px;
				height: auto;
				float: left;
			}
			li{
				list-style-type: none;
				
			}
			a{
				text-decoration: none;
			}
			
		</style>
	</head>
	<body>
		<div class="wrapper">
			<ul class="left" id="left">
				<li><a href="#">女靴</a></li>
				<li><a href="#">雪地靴</a></li>
				<li><a href="#">冬裙</a></li>
				<li><a href="#">呢大衣</a></li>
				<li><a href="#">毛衣</a></li>
				
				<li><a href="#">坎肩</a></li>
				<li><a href="#">女裤</a></li>
				<li><a href="#">羽绒服</a></li>
				<li><a href="#">牛仔裤</a></li>
			</ul>
			<ul class="center" id="center">
				<li><img src="../images/11.JPG"/</li>
				<li><img src="../images/22.JPG"/</li>
				<li><img src="../images/33.JPG"/</li>
				<li><img src="../images/44.JPG"/</li>
				<li><img src="../images/11.JPG"/</li>
				
				<li><img src="../images/33.JPG"/</li>
				<li><img src="../images/22.JPG"/</li>
				<li><img src="../images/44.JPG"/</li>
				<li><img src="../images/11.JPG"/</li>
				<li><img src="../images/33.JPG"/</li>
				
				<li><img src="../images/22.JPG"/</li>
				<li><img src="../images/11.JPG"/</li>
				<li><img src="../images/44.JPG"/</li>
				<li><img src="../images/11.JPG"/</li>
				<li><img src="../images/44.JPG"/</li>
				
				<li><img src="../images/11.JPG"/</li>
				<li><img src="../images/22.JPG"/</li>
				<li><img src="../images/33.JPG"/</li>
				
			</ul>
			<ul class="right" id="right">
				<li><a href="#">女包</a></li>
				<li><a href="#">男包</a></li>
				<li><a href="#">登山靴</a></li>
				<li><a href="#">皮带</a></li>
				<li><a href="#">围巾</a></li>
				
				<li><a href="#">皮衣</a></li>
				<li><a href="#">男毛衣</a></li>
				<li><a href="#">男皮裤</a></li>
				<li><a href="#">男靴</a></li>
			</ul>
		</div>
		<script>
			$("#center>li").show().siblings("li").hide();
			$(function(){
				//需求1：给左边的li标签设置鼠标点击事件，让中间的索引对应的理显示，其他li隐藏
				//需求2：给右边的li标签奢侈鼠标移入事件，让中间的对应的li显示，其他li隐藏
				
				/*
				*/
				/*
				$("#left a").mouseenter(function(){
					var idx = $(this).index();
					console.log(idx);
				})
				*/
				
				//需求1：
				$("#left>li").mouseenter(function(){
					//获取鼠标移入这个li的索引
					var idx = $(this).index();//索引：表示这个元素在兄弟元素中的排行
//					console.log(idx);
					//让中间索引的li显示，凄然的li隐藏
//					console.log($('#center>li:eq('+idx+')'));/字符串拼接
					$('#center>li').eq(idx).show().siblings("li").hide();
				})
				
				//需求2：
				$('#right>li').mouseenter(function(){
					//获取当前鼠标的li标签的索引
					var idx = $(this).index();
					idx+=9;//9为左边li的标签数
					//让中间索引对应的li显示，其他隐藏
					$('#center>li').eq(idx).show().siblings('li').hide();
				})
			})
		</script>
	</body>
</html>
